{template 'header'}
<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">设置</a>
        <a>
          <cite>首页轮播</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <input class="layui-input" placeholder="开始日" name="start_time" id="start_time" value="{$_GPC['start_time']}">
            <input class="layui-input" placeholder="截止日" name="end_time" id="end_time" value="{$_GPC['end_time']}">
            <button class="layui-btn" lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>
    <xblock>
        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
        <button type="button" class="layui-btn" id="upload">
            <i class="layui-icon">&#xe67c;</i>添加轮播图
        </button>
        <span class="x-right" style="line-height:40px">共有数据：{$total} 条</span>
    </xblock>
    <table class="layui-table x-admin">
        <thead>
        <tr>
            <th>
                <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i
                        class="layui-icon">&#xe605;</i></div>
            </th>
            <th>ID</th>
            <th>图片预览</th>
            <th>创建时间</th>
            <th>状态</th>
            <th>操作</th>
        </thead>
        <tbody>
        {loop $list $item}
        <tr>
            <td>
                <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='{$item["id"]}'><i
                        class="layui-icon">&#xe605;</i></div>
            </td>
            <td>{$item['id']}</td>
            <td width="120" height="120">
                {if empty($item['imgurl'])}
                暂无图片{else}
                <img src="{php echo cmf_get_upload_url($item['imgurl'])}" alt="">
                {/if}
            </td>
            <td>{php echo date('Y-m-d H:i:s')}</td>
            <td class="td-status">
                {if $item['isopen']}
                <span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span>
                {else}
                <span class="layui-btn layui-btn-disabled layui-btn-mini">已关闭</span>
                {/if}
            </td>
            <td class="td-manage">
                {if !$item['isopen']}
                <a onclick="slider_stop(this,{$item['id']})" href="javascript:;" title="启用" >
                    <i class="layui-icon">&#xe62f;</i>
                </a>
                {else}
                <a onclick="slider_stop(this,{$item['id']})" href="javascript:;" title="停用">
                    <i class="layui-icon">&#xe601;</i>
                </a>
                {/if}
                <a title="删除" onclick="slider_del(this,{$item['id']})" href="javascript:;">
                    <i class="layui-icon">&#xe640;</i>
                </a>
            </td>
        </tr>
        {/loop}
        </tbody>
    </table>
    <div class="page">
        {$pager}
    </div>
</div>
</div>
<script>
    layui.use(['jquery','layer','form'],function(){
        var $=layui.jquery
            ,layer=layui.layer
            ,form=layui.form

        $('table img').click(function(){
            console.log($(this).attr('src'))
            var imgSrc=$(this).attr('src')
            layer.open({
                type:1
                ,title:false
                ,closeBtn:0
                ,skin:'layui-layer-nobg'
                ,shadeClose:true
                ,content:'<img src="'+imgSrc+'" style="max-height:600px;max-width:100%;">'
                ,scrollbar:false
            })
        })
    })
    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#upload', //绑定元素
            url: '{php echo $this->createWebUrl("setting",["op"=>"slider","extra"=>"upload"])}', //上传接口
            size:4*1024,//4M
            done: function(res){
                layer.msg(res.msg,function () {
                    if(res.code){
                        location.reload()
                    }
                })
            },error: function(){
                layer.msg("网络异常，请稍后重试", {icon: 0});
            }
        });
    });
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#start_time', //指定元素
            type: 'datetime'
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end_time', //指定元素
            type: 'datetime'
        });
    });

    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(search)', function (data) {
            console.log(data.field)
            var str = '';
            for (var key in data.field) {
                str += key + "=" + data.field[key] + "&";
            }
            var url = '{php echo $this->createWebUrl("setting",["op"=>"slider"])}'
            location.href = url + "&" + str;
            return false;
        });
    });

    /*轮播-停用*/
    function slider_stop(obj, id) {
        var url = '{php echo $this->createWebUrl("setting",array("op"=>"slider","extra"=>"ting"))}'
        if ($(obj).attr('title') == '启用') {

            layer.confirm('确认要启用吗?,只能启用四张!', function (index) {
                $.post(url, {id: id, yes: 1}, function (ret) {
                    if (ret.code) {
                        //发异步把用户状态进行更改
                        $(obj).attr('title', '停用')
                        $(obj).find('i').html('&#xe601;');

                        $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已启用');
                        layer.msg('已启用!', {icon: 1, time: 1000},function () {
                            location.reload()
                        });
                    } else {
                        layer.msg(ret.msg, {icon: 0});
                    }
                }, 'json')
            })
        } else {
            layer.confirm('确认要停用吗？', function (index) {
                $.post(url, {id: id, yes: 0}, function (ret) {
                    if (ret.code) {
                        $(obj).attr('title', '启用')
                        $(obj).find('i').html('&#xe62f;');

                        $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已停用');
                        layer.msg('已停用!', {icon: 1, time: 1000},function () {
                            location.reload()
                        });
                    } else {
                        layer.msg(ret.msg, {icon: 0});
                    }
                }, 'json')
            })
        }
    }

    /*-删除*/
    function slider_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            //发异步删除数据
            var url = '{php echo $this->createWebUrl("setting",array("op"=>"slider","extra"=>"del"))}'
            $.post(url, {id}, function (ret) {
                if (ret.code) {
                    $(obj).parents("tr").remove();
                    layer.msg(ret.msg, {icon: 1, time: 1000});
                } else {
                    layer.msg(ret.msg, {icon: 0});
                }
            }, 'json')
        });
    }


    function delAll(argument) {

        var data = tableCheck.getData();

        layer.confirm('确认要删除吗？' + data, function (index) {
            //捉到所有被选中的，发异步进行删除
            var url = '{php echo $this->createWebUrl("setting",array("op"=>"slider","extra"=>"del"))}'
            $.post(url, {'ids': data}, function (ret) {
                console.log(ret)
                if (ret.code) {
                    layer.msg(ret.msg, {icon: 1});
                    $(".layui-form-checked").not('.header').parents('tr').remove();
                } else {
                    layer.msg(ret.msg, {icon: 0});
                }
            }, 'json')
        });
    }
</script>
<script>var _hmt = _hmt || [];
(function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>
</body>

</html>